<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /*
      1.为什么用promise?
        解决回调地狱
      2.promise是什么?
        promise是一个用于封装异步操作的容器
      3.promise怎么用?
        3.1 创建promise
            const p = new Promise((resolve, reject) => {
              // 一般是封装一些异步操作
              // 在异步操作成功以后, 需要调用resolve(), 将pending => fulfilled
              // 在异步操作成功以后, 需要调用reject(),  将pending => rejected
            })
        3.2 使用promise
            p.then(成功函数).catch(失败函数)
    */

      // 需求1: 希望2s后 控制台打印'zs', 封装成一个函数
      // 需求2: 封装一个函数. 2s后要做的事不能写死; => 最早的解决方案: 回调函数
      // 需求3: 希望2s后打印zs, 打印完zs 等2s以后, 再打印ls

      // function fn(callback) {
      //   setTimeout(() => {
      //     // console.log("zs");
      //     callback();
      //   }, 2000);
      // }

      // fn(function () {
      //   console.log("zs");
      // });

      // fn(function() {
      //   // alert('ls')
      //   console.log('ww')
      // })

      // fn(function () {
      //   console.log("zs");

      //   fn(function () {
      //     console.log("ls");

      //     fn(function () {
      //       console.log("ww");

      //       // fn()
      //     });
      //   });
      // });
      // 回调函数的问题: 容易嵌套多层, 代码横着走, => 回调地狱 => promise

      // 本质就是希望 2s以后要做某件事 => 希望在一个异步操作结束以后做某件事
      function fn() {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve();
          }, 2000);
        });
        // return p
      }

      // 希望2s后 做某件事
      // 链式调用, 下一个then中成功函数处理的是上一个成功函数返回的promise
      // fn().then(() => {
      //   console.log('zs')
      //   return fn()
      // }).then(() => {
      //   console.log('ls')
      //   return fn()
      // }).then(() => {
      //   console.log('ww')
      // })

      // 看过风景的人 => 终极解决方案 async 和 await
      // async和await 以同步的方式写异步的代码
      async function test() {
        await fn();
        console.log("zs");

        await fn();
        console.log("ls");

        await fn();
        console.log("ww");
      }

      test();

      // 一个异步操作结束后, 做某件事,
      // 1. 回调函数 => 地狱
      // 2. 封装promise => p.then(成功函数) / 利用async 和 await
    </script>
  </body>
</html>
